<template>
  <div id="main-content" class="details-box">
    <Scroll ref="scroll" class="details-content">
      <div class="details-tit">
        <div class="details-pic">
          <swiper>
            <swiper-slide v-for="(item, index) in detailsInfo.images" class="swiper-slider-box" :key="index">
              <img :src="item | ImgFilter" class="img-item" alt="Img">
            </swiper-slide>
          </swiper>
        </div>
        <div class="title">
          <span>{{detailsInfo.name}}</span>
        </div>
        <div class="info">
          <div class="money">
            <s class="originalPrice">¥{{detailsInfo.price}}</s>
          </div>
        </div>
        <div class="money-info">
          <div class="money-box">
            <div class="item">
              <span>定金</span>
              <span class="pricing">￥<i v-if="detailsInfo.orderMoneyMin!==detailsInfo.orderMoneyMax">{{detailsInfo.orderMoneyMin | pointFilter}} - </i>{{detailsInfo.orderMoneyMax | pointFilter}}</span>
            </div>
            <div class="item">
              <div>
                <span>尾款</span>
                <span class="canDiscount">￥0.00 - {{detailsInfo.balancePayment | pointFilter}}</span>
              </div>
              <div>
                <span>运费</span>
                <span class="canDiscount">￥{{detailsInfo.postage | pointFilter}}</span>
              </div>
            </div>
          </div>
          <div class="money-footer" @click="openPopup('isPopupSelectDeposit')">
            <template v-if="!(selectedNumbers.length > 0 && buyNumber !== 0)">
              <span :data-leng="selectedNumbers.length + ',' + buyNumber" class="money-mark">免尾款</span>
              <span class="money-dec">有机会免支付尾款</span>
              <span class="select-money">
                <em>选定金</em>
                <em class="arrow-right"></em>
              </span>
            </template>
            <template v-else>
              <span class="money-dec">已选{{currentSale}}%定金 {{buyNumber}}件 {{currentNumbers.length}}个预测码</span>
              <span class="select-money">
                <em class="arrow-right"></em>
              </span>
            </template>
          </div>
        </div>
      </div>
      <div class="graphic-info">
        <div class="tabs">
          <span :class="['tab-name', tabType === 1 ? 'active' : null]" @click="handleTabItem($event, 1)">商品详情</span>
          <span :class="['tab-name', tabType === 2 ? 'active' : null]" @click="handleTabItem($event, 2)">活动规则</span>
          <span class="underline" :style="{left: moveElLeft}" ref="underline"></span>
        </div>
        <div class="tabs-content">
          <div class="tab-content-details" v-show="tabType === 1" v-html="detailsInfo.desc"></div>
          <div class="tab-content-rules" v-show="tabType === 2" v-html="explain"></div>
        </div>
      </div>
    </Scroll>
    <div class="fixedBox" :class="{'iPhonex': isIphonex}" ref="fixedBoxBuy" >
      <button type="button" @click="handlePayPricing" class="payment-pricing">支付定金<template v-if="selectedNumbers.length > 0">￥{{(pricing * buyNumber) | pointFilter}}</template></button>
    </div>
    <!-- 选定金窗口 -->
    <BottomPopups :isShow.sync="popups.isPopupSelectDeposit">
      <div slot="body" class="popups-body">
        <div class="tit" >
          <div class="pic">
            <img :src="detailsInfo.images[0] | ImgFilter" alt="">
          </div>
          <div class="info">
            <span class="info-item">定金:<em class="pricing">¥{{pricing | pointFilter}}</em></span>
            <span class="info-item">可抵扣:<em>¥{{deduction | pointFilter}}</em></span>
            <span class="info-item">尾款:<em>¥{{tailSection | pointFilter}}</em></span>
            <span class="info-item">运费:<em>￥{{detailsInfo.postage | pointFilter}}</em></span>
          </div>
        </div>
        <Scroll ref="decScroll" style="height: 10rem;">
          <div class="type-size list-group">
            <h4 class="title">规格</h4>
            <div :class="['size-list', lCrazySpecificationsVo.length <= 2 ? 'one-size' : null]">
              <span
                v-for="(item, index) in lCrazySpecificationsVo"
                :key="index"
                @click="handleGgSelected(item)"
                :class="['list-item', item.amount === 0 ? 'disabled' : null, currentGgID === item.id ? 'active' : null]"
              >{{item.name}}</span>
            </div>
          </div>
          <div class="type-proportion list-group">
            <h4 class="title">定金比例</h4>
            <div :class="['proportion-list', lCrazyStrategyVo.length <= 2 ? 'one-size' : null]">
              <span
                v-for="(item, index) in lCrazyStrategyVo"
                :key="index"
                :class="['list-item', currentSaleId === item.id ? 'active' : null]"
                @click="handleProportionItem($event, item)"
              >{{item.sale}}%</span>
              <span v-if="lCrazyStrategyVo.length > 0" class="proportion-float" ref="proportionFloat"><em ref="arrowTop" class="arrow-top"></em>预测{{currentSaleSelectNumber}}位免尾款码（如预测成功，尾款全免）</span>
            </div>
          </div>
          <div class="buy-num list-group">
            <div>购买件数</div>
            <div class="settings">
              <div class="settings-item" @click="handleMinus">
                <span :class="['icon-minus', buyNumber <= 1 ? 'disable' : null]"></span>
              </div>
              <span class="number">{{buyNumber}}</span>
              <div class="settings-item" @click="handleAdd">
                <span :class="['icon-add', buyNumber >= detailsInfo.buyNum || amount  <= 0 || buyNumber >= amount ? 'disable' : null]" ></span>
              </div>
            </div>
          </div>
          <div class="dec list-group">
              <p v-html="orderExplain"></p>
          </div>
        </Scroll>
        <div class="footer">
          <button type="button" @click="handlePredictNumber" class="btn btn-pink">预测号码</button>
        </div>
      </div>
    </BottomPopups>
    <!-- 预测折扣码窗口 -->
    <BottomPopups :isShow.sync="popups.isPopupSelectDiscount" @handleClose="bindClose">
      <div slot="body" class="discount-popups-body">
        <div class="title">
          <span class="name">预测免尾款码</span>
          <span class="info">您有{{buyNumber}}次预测机会</span>
        </div>
        <div class="discount-list">
          <Scroll ref="discount" class="discountScroll">
            <div class="box">
              <div
                v-for="(item, index) in buyNumber"
                @click="handleSelectNumber(index)"
                :key="index"
                :class="['list-item', 'btn', selectedNumbers[index] ? 'btn-pink' : 'default']"
              >
                <template v-if="typeof selectedNumbers[index] === 'undefined'">
                  点击选择号码+
                </template>
                <template v-else>
                  <em v-for="(item, index) in selectedNumbers[index]" :key="index">{{item}}</em>
                </template>
              </div>
            </div>
          </Scroll>
        </div>
        <div class="footer">
          <button type="button" @click="handlePredictBack" class="discount-back btn">上一步</button>
          <button type="button" @click="handlePredictSuccess" class="btn btn-pink">提交预测</button>
        </div>
      </div>
    </BottomPopups>
    <SelectNumber :isShow.sync="popups.isPopupSelectNumber" :defaultNumbers="selectedNumbers[currentSelectNumberIndex] || currentDefaultNumber" :selectNumberLen="currentSaleSelectNumber" @handleSelectedNumber="handleSelectedNumber" />
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import Ajax from "@/mixins/ajax";
import { Popups, BottomPopups } from "~/popOut";
import { Scroll } from "~/vScroll";
import SelectNumber from "~/selectNumber";

/* eslint-disable */
import "swiper/dist/css/swiper.css";

const queryMallDetailUrl = "/card-service-web/onePercent/queryMallDetail";
const getExPlainUrl = "/card-service-web/onePercent/explain";
// 预定规则协议接口
const orderExplainUrl = "/card-service-web/onePercent/orderExplain";
// 预测规则协议接口
const guessExplainUrl = "/card-service-web/onePercent/guessExplain";

export default {
  name: "Details",
  mixins: [Ajax],
  components: {
    Popups,
    swiper,
    swiperSlide,
    Scroll,
    BottomPopups,
    SelectNumber
  },
  filters: {
    numberFilter(value) {
      if (typeof value === "undefined") {
        return "点击选择号码+";
      }
      let result = "";
      value.forEach(item => {
        result += item;
      });
      return result;
    }
  },
  data() {
    return {
      // 商品ID
      id: this.$route.params.id,
      // 商品详情与折扣规则切换状态 状态值：1，2
      tabType: 1,
      // 商品想与折扣规则切换的横杆位置
      moveElLeft: "",
      popups: {
        // 选定金窗口
        isPopupSelectDeposit: false,
        // 选折扣码窗口
        isPopupSelectDiscount: false,
        // 选择预测号码窗口
        isPopupSelectNumber: false
      },
      // 详情信息
      detailsInfo: {
        images: []
      },
      // 活动规则
      explain: "",
      // 折扣范围数据
      lCrazyStrategyVo: [],
      // 规格列表
      lCrazySpecificationsVo: [],
      // 选择的号码
      selectedNumbers: [],
      // 选择的号码没有索引的 应用于判断长度是否和购买数相同
      currentNumbers: [],
      // 需支付定金
      pricing: 0,
      // 可抵扣金额
      deduction: 0,
      // 尾款金额
      tailSection: 0,
      // 当前选择的折扣
      currentSale: 0,
      // 当前选择的折扣需要猜几位号码
      currentSaleSelectNumber: 1,
      // 当前选择的折扣默认初始号码
      currentDefaultNumber: [],
      // 当前选择折扣的ID
      currentSaleId: 0,
      // 当前选择的规格ID
      currentGgID: 0,
      // 当前选择的规格
      currentGgName: "",
      // 购买数量
      buyNumber: 0,
      // 当前规格的库存量
      amount: 0,
      // 当前要选择号码的索引
      currentSelectNumberIndex: 0,
      // 预定规则
      orderExplain: "",
      // 预测规则协议
      guessExplain: "",
      // 是否为iPhone X
      isIphonex: false
    };
  },
  // 页面进入
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // 更新IScroll尺寸
      vm.$nextTick(() => {
        vm.$refs.scroll.refresh();
      });
    });
  },
  mounted() {
    this.iphoneType();
    sessionStorage.removeItem("orderInfo");
    // 设置带底部bar
    const windowHeight = this.getHeight();
    /* eslint-disable */
    const headerEl = document.querySelector("#header");
    const fixedBoxBuy = this.$refs.fixedBoxBuy;
    const headerElHeight = this.getElHeight(headerEl);
    const fixedBoxBuyHeight = this.getElHeight(fixedBoxBuy);
    this.mainHeight = windowHeight - (headerElHeight + fixedBoxBuyHeight);
    // 设置scroll在详情页的高度
    this.$nextTick(() => {
      // 刷新滚动区域内容高度
      this.$refs.scroll.refresh();
    });
    // 获取详情信息
    this.getMallDetails();
    // 获取活动规则
    this.getExPlain();
    // 获取预定规则协议
    this.getOrderExplain();
    // 过去预测规则协议
    this.getGuessExplain();
  },
  methods: {
    /**
     * 获取预测规则介绍
     */
    getGuessExplain() {
      this.post(guessExplainUrl).then(body => {
        if (+body.execErrCode === 200) {
          this.guessExplain = body.execData.explain;
        }
      });
    },
    /**
     * 获取预定规则协议
     */
    getOrderExplain() {
      this.post(orderExplainUrl).then(body => {
        if (+body.execErrCode === 200) {
          this.orderExplain = body.execData.explain;
        }
      });
    },
    /**
     * 支付定金跳转
     */
    handlePayPricing() {
      // 筛选选择列表（把选择的列表筛选出来）
      if (
        this.currentNumbers.length === this.buyNumber &&
        this.buyNumber !== 0
      ) {
        // 定金， 可抵扣金额， 尾款金额，购买数量, 预测的号码, 商品Id，折扣ID，规格ID
        const {
          pricing,
          deduction,
          tailSection,
          buyNumber,
          selectedNumbers,
          id,
          currentSaleId,
          currentGgID
        } = this;
        // 商品原价
        const { price } = this.detailsInfo;
        let numberToString = "";
        selectedNumbers.forEach(item => {
          numberToString += item.toString().replace(/\,/g, "") + ",";
        });
        numberToString = numberToString.replace(/\,$/, "");
        this.$router.push(
          `/goods/MakeSureOrder?productId=${id}&pricing=${this.point(
            pricing
          )}&deduction=${this.point(deduction)}&tailSection=${this.point(
            tailSection
          )}&buyNumber=${buyNumber}&price=${price}&number=${numberToString}&saleId=${currentSaleId}&sizeId=${currentGgID}`
        );
      } else if (this.currentNumbers.length > 0) {
        // 打开选号码窗口
        this.openPopup("isPopupSelectDiscount");
      } else {
        // 打开选定金窗口
        this.openPopup("isPopupSelectDeposit");
      }
    },
    /**
     * 跳转预测号码
     */
    handlePredictNumber() {
      if (this.buyNumber > 0) {
        this.openPopup("isPopupSelectDiscount", "isPopupSelectDeposit");
      } else {
        const errorObj = {
          isPrompt: true,
          isCloseEl: true,
          isConfirm: false,
          title: "提示",
          info: "库存不足",
          isMaskDown: true,
          textAlign: "center"
        };
        this.$emit("onPrompt", errorObj);
      }
    },
    /**
     * 取消预测号码
     */
    handlePredictBack() {
      // 打开选择定金窗口关闭预测窗口
      this.openPopup("isPopupSelectDeposit", "isPopupSelectDiscount");
      this.setSelectedNumber([]);
    },
    /**
     * 设置号码
     */
    setSelectedNumber(nextValue) {
      this.selectedNumbers = nextValue;
      this.currentNumbers = this.selectedNumbers.filter(item => item);
    },
    // 如果完成预测窗口被关闭
    bindClose() {
      // // 筛选选择列表（把选择的列表筛选出来）
      // const numbers = this.selectedNumbers.filter(item => item);
      // // 判断如果全部选择完则执行关闭窗口，如果没选择玩则不关闭
      // if (numbers.length !== this.buyNumber) {
      //   this.selectedNumbers = [];
      // }
    },
    /**
     * 完成预测
     */
    handlePredictSuccess() {
      // 判断如果全部选择完则执行关闭窗口，如果没选择玩则不关闭
      if (this.currentNumbers.length === this.buyNumber) {
        // 支付定金
        this.handlePayPricing();
        this.popups.isPopupSelectDiscount = false;
      } else {
        const errorObj = {
          isPrompt: true,
          isCloseEl: true,
          isConfirm: false,
          title: "提示",
          info: `您还有${this.buyNumber -
            this.currentNumbers
              .length}个机会未用完，请将全部号码填写完毕后再提交。`,
          isMaskDown: true,
          textAlign: "left"
        };
        this.$emit("onPrompt", errorObj);
      }
    },
    // 判断是否为iPhone X
    iphoneType() {
      var u = navigator.userAgent;
      if (!(u.indexOf("Android") > -1 || u.indexOf("Adr") > -1)) {
        if (window.screen.height == 812) {
          this.isIphonex = true;
        }
      }
    },
    /**
     * 处理打开选择号码窗口
     */
    handleSelectNumber(index) {
      // 保存当前选择索引
      this.currentSelectNumberIndex = index;
      this.openPopup("isPopupSelectNumber");
    },
    /**
     * 选择完成号码的回调
     */
    handleSelectedNumber(number) {
      // 设置当前选择号码
      this.selectedNumbers[this.currentSelectNumberIndex] = [].concat(number);
      this.setSelectedNumber(this.selectedNumbers);
    },
    /**
     * 获取活动规则信息
     */
    getExPlain() {
      this.post(getExPlainUrl).then(body => {
        if (+body.execErrCode === 200) {
          this.explain = body.execData.explain;
        }
      });
    },
    /**
     * 获取商品详情数据
     */
    getMallDetails() {
      this.post(queryMallDetailUrl, {
        productId: this.id
      }).then(body => {
        if (+body.execErrCode === 200) {
          // 详情信息
          this.detailsInfo = body.execData;
          // 折扣范围
          this.lCrazyStrategyVo = body.execData.lCrazyStrategyVo;
          // 规格列表
          this.lCrazySpecificationsVo = body.execData.lCrazySpecificationsVo;
          // 初始化规格数据
          let flag = false;
          this.lCrazySpecificationsVo.forEach(item => {
            if (!flag && item.amount > 0) {
              this.saveGgData(this.lCrazySpecificationsVo[0]);
              flag = true;
            }
          });
          // 初始化折扣数据
          this.saveSaleData(this.lCrazyStrategyVo[0]);
        }
        // 设置scroll在详情页的高度
        this.$nextTick(() => {
          // 刷新滚动区域内容高度
          this.$refs.scroll.refresh();
        });
      });
    },
    /**
     * 打开窗口
     * @param [String] type 窗口类型
     * @param [String] closeType 关闭窗口类型
     */
    openPopup(type, closeType) {
      this.popups[type] = true;
      this.popups[closeType] && (this.popups[closeType] = false);
      this.$nextTick(() => {
        this.$refs.decScroll.refresh();
        this.$refs.discount.refresh();
      });
    },
    /**
     * tab切换处理
     */
    handleTabItem(event, type) {
      // 获取当前选择元素
      const currentEl = event.target;
      // 获取当前底部选中横杆元素
      const bottomEl = this.$refs.underline;
      this.moveElLeft = this.setElLeft(currentEl, bottomEl) + "px";
      // 切换当前选择状态
      this.tabType = type;
      this.$nextTick(() => {
        // 刷新滚动区域内容高度
        this.$refs.scroll.refresh();
      });
    },
    /**
     * 减少购买数量
     */
    handleMinus() {
      if (this.buyNumber > 1) {
        this.selectedNumbers = [];
        this.currentNumbers = [];
        --this.buyNumber;
      }
    },
    /**
     * 增加购买数量
     */
    handleAdd() {
      if (
        this.amount > this.buyNumber &&
        this.buyNumber < this.detailsInfo.buyNum
      ) {
        this.selectedNumbers = [];
        this.currentNumbers = [];
        ++this.buyNumber;
      }
    },
    /**
     * 选择规格
     */
    handleGgSelected(item) {
      this.saveGgData(item);
    },
    /**
     * 选择折扣
     */
    handleProportionItem(event, item) {
      // 清空号码
      this.setSelectedNumber([]);
      // 保存定金比例数据
      this.saveSaleData(item);
      // 提示文字的浮动盒子元素
      const floatEl = this.$refs.proportionFloat;
      // 提示文字箭头元素
      const arrowTopEl = this.$refs.arrowTop;
      // 点击目标元素
      const targetEl = event.target;
      // 获取点击目标元素位置
      const elX = parseInt(targetEl.offsetLeft, 10);
      const elY = parseInt(targetEl.offsetTop, 10);
      // 获取当前元素的宽度
      const elWidth = parseInt(this.getStyle(targetEl, "width"), 10);
      // 获取当前元素的高度
      const elHeight = parseInt(this.getElHeight(targetEl), 10);
      // 箭头的高度
      const arrowHeight = parseInt(this.getElHeight(arrowTopEl), 10);
      floatEl.style.top = `${elY + elHeight + arrowHeight}px`;
      // 父元素的paddingLeft值
      const parentPaddingLeft = parseInt(
        this.getStyle(targetEl.parentElement, "paddingLeft"),
        10
      );
      arrowTopEl.style.left = `${elX +
        elWidth / 2 -
        arrowHeight / 2 -
        parentPaddingLeft}px`;
    },
    /**
     * 保存折扣数据
     */
    saveSaleData(item) {
      // 保存当前选择折扣
      this.currentSale = item.sale;
      // 保存当前选择的折扣猜号码的数量
      this.currentSaleSelectNumber = item.keysNum;
      for (let i = 0; i < item.keysNum; i++) {
        this.currentDefaultNumber[i] = 0;
      }
      // 保存当前折扣的抵扣金额
      this.deduction = item.coupon;
      // 当前折扣ID
      this.currentSaleId = item.id;
      // 当前折扣需要支付的定金费用
      this.pricing = +this.detailsInfo.price * (+item.sale / 100);
      // 计算尾款金额
      this.tailSection = +this.detailsInfo.price - +item.coupon;
    },
    /**
     * 保存规格数据
     */
    saveGgData(item) {
      if (item) {
        if (item.amount > 0) {
          // 当前选择的规格ID
          this.currentGgID = item.id;
          // 当前选择的规格
          this.currentGgName = item.name;
        }
        this.amount = item.amount;
        if (+item.amount === 0) {
          this.buyNumber = 0;
        } else {
          this.buyNumber = 1;
        }
      }
    },
    /**
     * 设置元素位置
     * @param [ELement] target 目标元素
     * @param [Element] moveEl 移动元素
     */
    setElLeft(target, moveEl) {
      // 获取当前元素的offsetLeft值
      const elX = parseInt(target.offsetLeft, 10);
      // 获取当前元素的宽度
      const elWidth = parseInt(this.getStyle(target, "width"), 10);

      // 获取移动元素宽度
      const moveElWidth = parseInt(this.getStyle(moveEl, "width"), 10);
      // 计算横杆元素的left值
      const left = elX + elWidth / 2 - moveElWidth / 2;
      moveEl.style.left = `${left}px`;
      return left;
    }
  }
};
</script>

<style scoped>
em {
  font-style: normal;
}
.swiper-container {
  z-index: 0 !important;
}
.details-box {
  background: #f5f5f4;
}
.details-tit {
  padding: 0.49rem 0.48rem 0.32rem;
  margin-bottom: 0.55rem;
  background: #fff;
}
.details-tit .details-pic {
  width: 8.64rem;
  height: 6.64rem;
  margin-bottom: 0.48rem;
  white-space: nowrap;
  overflow: hidden;
}
.details-tit .title {
  font-size: 0.51rem;
  color: #000000;
  margin-bottom: 0.6rem;
}
.details-tit .info {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  padding-bottom: 0.46rem;
}
.details-tit .info .money .originalPrice {
  font-size: 0.48rem;
  color: #8e8e8e;
}
.details-tit .money-info {
  padding: 0.2rem 0 0;
  background-color: #faeaec;
  border-radius: 6px;
  font-size: 0.42rem;
}
.money-info .money-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 0.24rem;
}
.money-info .money-box .item {
  margin: 0.21rem 0;
}
.money-info .money-box .item:last-child {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
.money-info .money-box .item .pricing {
  font-size: 0.72rem;
  color: #d11463;
}
.money-info .money-box .item .canDiscount {
  font-size: 0.48rem;
}
.money-info .money-footer {
  display: flex;
  flex-direction: row;
  padding: 0 0.24rem;
  border-top: 1px solid #dbc0c4;
  align-items: center;
}
.money-info .money-footer span {
  padding: 0.27rem 0;
}
.money-info .money-footer .money-mark {
  padding: 0.08rem 0.13rem;
  margin-right: 0.27rem;
  background-color: #d11463;
  border-radius: 0.06rem;
  color: #fff;
  font-size: 0.39rem;
}
.money-info .money-footer .money-dec {
  flex-grow: 1;
}
.money-info .money-footer .select-money {
  color: #d11463;
}
.money-info .money-footer .select-money em {
  font-style: normal;
}
.arrow-right {
  display: inline-block;
  width: 0.18rem;
  height: 0.32rem;
  background: url("../../assets/img/arrow-right-details.png") no-repeat;
  background-size: 100%;
}
.graphic-info {
  margin-bottom: 0.45rem;
  background: #fff;
}
.tabs {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  position: relative;
}
.tabs .tab-name {
  flex-grow: 1;
  text-align: center;
  padding: 0.45rem 0;
  font-size: 0.48rem;
  color: #666;
}
.tabs .tab-name.active {
  color: #000;
}
.tabs .underline {
  position: absolute;
  left: 1.48rem;
  bottom: 0;
  width: 1.86rem;
  height: 0.06rem;
  background-color: #000000;
  transition: all 0.5s ease-in-out;
}
.tabs-content {
  padding: 0.58rem 0.49rem 0.33rem;
}
.instructions {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  height: 1.5rem;
  line-height: 1.5rem;
  padding: 0 0.49rem 0 0.47rem;
  background: #fff;
  font-size: 0.48rem;
  color: #000000;
}
.instructions .arrow .icon-arrow {
  display: inline-block;
  width: 0.22rem;
  height: 0.4rem;
  background: url("../../assets/img/arrow.png") no-repeat;
  background-size: 100%;
}

.fixedBox {
  padding: 0.18rem 0.48rem;
  background-color: #fff;
  border-top: 1px solid #c8c7cc;
}
.fixedBox.iPhonex {
  position: relative;
  top: -0.3rem;
  padding-bottom: 0.48rem;
}
.fixedBox .payment-pricing {
  width: 100%;
  height: 1.14rem;
  background-color: #d11463;
  font-size: 0.54rem;
  color: #fff;
  border-radius: 0.06rem;
}

.cancel-info {
  margin-top: 0.62rem;
  font-size: 0.42rem;
  text-align: left;
}
.info-center {
  text-align: center;
}
.pop-footer-btns .pop-footer-close {
  width: 5.01rem;
  height: 1.08rem;
  background-color: #d11463;
  border-radius: 2rem;
  color: #fff;
  font-size: 0.54rem;
}
/* 弹框样式 */
.popups-body .tit {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 0.42rem;
  padding: 0 0.86rem 0 0.48rem;
  margin-bottom: 0.41rem;
}
.popups-body em {
  font-style: normal;
}
.tit .pic {
  width: 1.8rem;
  height: 1.8rem;
  margin-right: 0.4rem;
}
.tit .pic img {
  display: inline-block;
  width: 1.8rem;
  height: 1.8rem;
}
.swiper-slider-box {
  text-align: center;
  min-height: 6.64rem;
  max-height: 6.64rem;
  position: relative;
}
.swiper-slider-box .img-item {
  max-width: 100%;
  margin: 0 auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.popups-body .tit .info {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  line-height: 1.5;
  font-size: 0.42rem;
}
.popups-body .tit .info .info-item:first-child {
  margin-right: 0.4rem;
}
.popups-body .tit .info .info-item em {
  vertical-align: -2px;
  font-size: 0.48rem;
}
.popups-body .tit .info .info-item .pricing {
  font-size: 0.63rem;
  color: #d11463;
}
/* 规格 */
.type-size {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.list-group {
  border-top: 1px solid #e1e1e1;
}
.list-group .title {
  width: 100%;
  padding: 0.3rem 0.46rem;
  text-align: left;
  font-weight: normal;
}
.type-size .size-list,
.type-proportion .proportion-list {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
  /* width: 100%; */
  /* padding: 0 0.48rem 0 0.48rem; */
  font-size: 0.42rem;
}
.type-size .size-list {
  position: static;
  width: 100%;
}
.type-size .size-list .list-item,
.type-proportion .proportion-list .list-item {
  min-width: 1.68rem;
  padding: 0 0.3rem;
  height: 0.9rem;
  line-height: 0.93rem;
  margin-bottom: 0.4rem;
  background-color: #f1ebeb;
  border-radius: 0.45rem;
  color: #000;
  margin-left: 0.48rem;
}
.type-size .size-list .disabled {
  color: rgba(0, 0, 0, 0.2);
}
.type-proportion .proportion-list .list-item {
  margin-bottom: 1.18rem;
}
.type-size .size-list .list-item.active,
.type-proportion .proportion-list .list-item.active {
  background-color: #d11463;
  color: #fff;
}
.type-proportion .proportion-list .proportion-float {
  position: absolute;
  top: 1.04rem;
  left: 0.48rem;
  width: 80%;
  padding: 0.13rem 0.28rem;
  background-color: #dd92b1;
  border-radius: 0.315rem;
  font-size: 0.39rem;
  color: #fff;
}
.type-proportion .proportion-list .proportion-float .arrow-top {
  display: inline-block;
  position: absolute;
  top: -0.17rem;
  left: 0.9rem;
  border-width: 0.09rem;
  border-style: solid;
  border-color: transparent transparent #dd92b1 transparent;
}
.buy-num {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0.54rem 0.47rem;
}
.buy-num .settings {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  /* background: red; */
}
.buy-num .settings .settings-item:first-child {
  padding: 0.37rem 0.1rem;
}
.buy-num .settings .settings-item {
  display: flex;
  align-items: center;
  padding: 0.1rem;
}
.buy-num .number {
  min-width: 1.24rem;
  max-width: 5rem;
}
.buy-num .icon-minus {
  display: inline-block;
  width: 0.54rem;
  height: 0.06rem;
  background-color: #666;
}
.buy-num .icon-minus.disable {
  background-color: #535353;
  opacity: 0.2;
}
.buy-num .icon-add.disable {
  filter: grayscale(10%);
  opacity: 0.2;
}
.buy-num .icon-add {
  display: inline-block;
  width: 0.54rem;
  height: 0.54rem;
  background: url("../../assets/img/icon-add.png") no-repeat;
  background-size: 100%;
}
.popups-body .dec {
  /* height: 1.5rem; */
  font-size: 0.39rem;
  padding: 0.54rem 0.48rem 0;
  text-align: left;
}
.popups-body .footer {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 0.17rem 0.48rem;
}
.discount-popups-body .title {
  display: flex;
  flex-direction: column;
  font-size: 0.39rem;
  margin-top: -0.1rem;
}
.discount-popups-body .title .name {
  font-size: 0.6rem;
  color: #000;
}
.discount-popups-body .title .info {
  margin-top: 0.29rem;
  color: #bb1e7b;
}
.discount-popups-body .discount-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 4rem;
  margin-top: 0.3rem;
  border-bottom: 1px solid #e1e1e1;
}
.discount-popups-body .discount-list .discountScroll {
  width: 100%;
  height: 4rem;
}
.discount-popups-body .discount-list .box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.discount-popups-body .discount-list .list-item {
  width: 6.2rem;
  height: 1.14rem;
  line-height: 1.14rem;
  border-radius: 0.57rem;
  margin-bottom: 0.45rem;
}
.discount-popups-body .discount-list .list-item.default {
  background-color: #fff;
  border: solid 0.03rem #d11564;
  color: #d11463;
  font-size: 0.45rem;
}
.discount-popups-body .discount-list .list-item.btn-pink {
  font-size: 0.51rem;
}
.discount-popups-body .discount-list .list-item.btn-pink em {
  padding: 0 0.2rem;
}
.discount-popups-body .dec {
  text-align: left;
  padding: 0 0.48rem;
  margin-bottom: 0.75rem;
  font-size: 0.39rem;
}
.discount-popups-body .discount-back {
  padding: 0.45rem 0;
  background: #fff;
  color: #bb1e7b;
  font-size: 0.39rem;
}
.discount-popups-body .footer {
  padding: 0 0.48rem 0.18rem;
}
.discount-popups-body .footer.iPhonex {
  position: relative;
  top: -0.3rem;
}
.discount-popups-body .footer .btn:last-child {
  margin-top: 0.18rem;
}
.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}
.pricing i {
  font-style: normal;
}
</style>

